<template>
  <el-card class="guest-container">
    <template #header>
      <div class="header">
        <el-button type="primary" :icon="Plus" @click="handleAdd">增加</el-button>
      </div>
    </template>
    <Table action='/coupon/list' ref="table">
      <template #column>
        <el-table-column prop="couponName" label="名称">
        </el-table-column>
        <el-table-column prop="couponDesc" label="介绍">
        </el-table-column>
        <el-table-column prop="couponTotal" label="数量">
        </el-table-column>
        <el-table-column prop="discount" label="优惠金额">
        </el-table-column>
        <el-table-column prop="min" label="最少消费金额">
        </el-table-column>
        <el-table-column prop="couponLimit" label="用户领取数量">
        </el-table-column>
        <el-table-column label="类型">
          <template #default="scope">
            <span
              :style="scope.row.couponType == 0 ? 'color: green;' : scope.row.couponType == 1 ? 'color: blue;' : scope.row.couponType == 2 ? 'color: red;' : ''">
              {{ scope.row.couponType == 0 ? '通用券' : scope.row.couponType == 1 ? '注册赠券' : scope.row.couponType == 2 ?
                '优惠券码兑换' : '' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="couponStartTime" label="优惠券开始时间">
        </el-table-column>
        <el-table-column prop="couponEndTime" label="优惠券结束时间">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button style="margin-right: 10px;" type="primary" size="mini"
              @click="handleEdit(scope.row)">修改</el-button>
            <el-dropdown size="small" :hide-on-click="false" :hide-timeout="500" v-if="state.role != 201">
              <el-button type="primary">
                更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-if="scope.row.couponType == 2"><span
                      @click="handleSell(scope.row)">派发</span></el-dropdown-item>
                  <el-dropdown-item><span @click="handleDel(scope.row)">删除</span></el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </template>
    </Table>
    <el-dialog :title="state.title" v-model="state.visible" width="500px">
      <el-form :model="state.ruleForm" :rules="state.rules" ref="formRef" label-width="120px" class="good-form">
        <el-form-item label="名称" prop="couponName">
          <el-input type="text" v-model="state.ruleForm.couponName"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="couponDesc">
          <el-input type="text" v-model="state.ruleForm.couponDesc"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="couponTotal">
          <el-input type="number" v-model="state.ruleForm.couponTotal"></el-input>
        </el-form-item>
        <el-form-item label="优惠金额" prop="discount">
          <el-input type="number" v-model="state.ruleForm.discount"></el-input>
        </el-form-item>
        <el-form-item label="最少消费金额" prop="min">
          <el-input type="number" v-model="state.ruleForm.min"></el-input>
        </el-form-item>
        <el-form-item label="用户领取数量" prop="couponLimit">
          <el-input type="number" v-model="state.ruleForm.couponLimit"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="couponType">
          <el-select v-model="state.ruleForm.couponType" placeholder="请选择" size="large">
            <el-option label="通用券" value="0" />
            <el-option label="注册赠券" value="1" />
            <el-option label="优惠券码兑换" value="2" />
            <el-option label="活动券" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始/结束时间" prop="name">
          <el-date-picker v-model="state.ruleForm.time" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="截止时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.visible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import Table from '@/components/Table.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Delete } from '@element-plus/icons-vue'
import axios from '@/utils/axios'

let table = ref(null)
const state = reactive({
  title: '新增',
  visible: false,
  id: '',
  ruleForm: {
    couponDesc: '',
    couponEndTime: '',
    couponLimit: '',
    couponName: '',
    couponStartTime: '',
    couponTotal: '',
    couponType: '',
    discount: '',
    min: '',
    time: []
  },
  rules: {},
})
onMounted(() => {

})
const handleSell = (row) => {
  ElMessageBox.prompt('请输入派发的手机号', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    inputPattern:
      /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
    inputErrorMessage: '请输入',
  })
    .then(({ value }) => {
      axios.get('/giveUserCoupon/' + row.couponId + '/' + value).then(res => {
        ElMessage.success('派发成功')
        table.value.getList()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消',
      })
    })
}
const handleDel = (row) => {
  axios.delete('/coupon/' + row.couponId).then(res => {
    ElMessage.success('删除成功')
    table.value.getList()
  })
}
const handleAdd = () => {
  state.title = '新增'
  state.id = ''
  state.ruleForm = {
    couponDesc: '',
    couponEndTime: '',
    couponLimit: '',
    couponName: '',
    couponStartTime: '',
    couponTotal: '',
    couponType: '',
    discount: '',
    min: '',
    time: []
  }
  state.visible = true
}
const handleEdit = (row) => {
  state.title = '修改'
  state.id = row.couponId
  axios.get('/coupon/' + row.couponId).then(res => {
    state.ruleForm = {
      couponDesc: res.couponDesc,
      couponEndTime: res.couponEndTime,
      couponLimit: res.couponLimit,
      couponName: res.couponName,
      couponStartTime: res.couponStartTime,
      couponTotal: res.couponTotal,
      couponId: res.couponId,
      couponType: res.couponType + '',
      discount: res.discount,
      min: res.min,
      time: [res.couponStartTime, res.couponEndTime]
    }
    state.visible = true
  })
}
const submitForm = () => {
  const params = state.ruleForm
  params.couponStartTime = state.ruleForm.time[0]
  params.couponEndTime = state.ruleForm.time[1]
  delete params.time
  if (state.id) {
    axios.put('/coupon/update', params).then(res => {
      ElMessage.success('修改成功')
      table.value.getList()
      state.visible = false
    })
  } else {
    axios.post('/coupon/save', params).then(res => {
      ElMessage.success('添加成功')
      table.value.getList()
      state.visible = false
    })
  }
}
</script>
<style></style>